
{% extends 'main.html' %}

{% block content %}
<style>
    .room-container{
        display: grid; {# 采用网格布局 #}
        grid-template-columns: 3fr 1fr; {# 前者是后者的3倍 #}
    }
</style>

<div class="room-container">

    <div>
        {# 房间主体 start #}
        <h1>{{ room_pk.name }}</h1>

        <p>{{ room_pk.desc }}</p>
        <div class="comment-wrapper">
            <h3>对话</h3>
            <hr/>

            {% for message in room_message %}
            <div>
                {% if request.user == message.user %}
                <a href="{% url 'delete-message' message.id%}">删除</a>
                {% endif %}

                <small>@{{ message.user }} {{ message.created|timesince }}前...</small>
                <p>{{ message.body }}</p>
                <hr>
            </div>
            {% endfor %}

        </div>
        {# 房间主体 end #}

        {# 发消息框表单 start #}
        <div class="comment-form">
            <form method="POST" action="">
                {% csrf_token %}
                <input type="text" name="body" placeholder="发送你的想法...">

            </form>
        </div>
        {# 发消息框表单 end #}
    </div>

    {# 参与者 end #}
    <div class="partcipators-container">

    <h3>参与者</h3>
    <hr>

    {% for user in participants %}
        <div>
            <p>@{{ user.username }}</p>
        </div>
    {% endfor %}
    </div>
    {# 参与者 end #}


</div>



{% endblock %}
